<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .username {
            position: absolute;
            left: 347px;
            top: 250px;
            border-radius: 5px;
            height: 24px;
        }

        button {
            background: transparent;
            outline: none;
            border: none;
            color: white;
        }

        .heroShow {
            width: 50px;
            height: 50px;
        }

        .sub {
            position: absolute;
            left: 351px;
            top: 288px;
            width: 126px;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }



        .geme {
            position: relative;
        }

        .heroBtn {
            position: absolute;
            left: 45px;
            top: 8px;
            font-size: 14px;
        }

        .skinBtn {
            position: absolute;
            top: 8px;
            left: 105px;
            font-size: 14px;
        }

        .userView {
            position: absolute;
            /* width: 80px; */
            top: 34px;
            left: 720px;
        }

        .userView img {
            width: 40px;
            height: 40px;
        }

        .chioseusername {
            display: block;
            color: rgb(255, 215, 0);
            text-align: center;
            font-size: 12px;
            font-weight: bold;
        }

        .skillsView {
            position: absolute;
            display: flex;
            flex-direction: column;
            left: 660px;
            top: 200px;
        }

        .skillsView img {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
        }

        .heroView {
            width: 120px;
            position: absolute;
            margin-top: 40px;
            margin-left: 20px;
            display: flex;
            flex-wrap: wrap;
        }

        .skinView {
            width: 130px;
            position: absolute;
            margin-top: 40px;
            margin-left: 20px;
            display: flex;
            flex-wrap: wrap;
        }

        .heroView img {
            width: 50px;
            height: 50px;

        }

        .skinView img {
            width: 50px;
            height: 50px;
        }

        .heroItem {
            margin-left: 10px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            color: gray;
            align-items: center;
            font-size: 12px;
        }

        .skinItem {
            margin-left: 10px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            color: gray;
            align-items: center;
            font-size: 12px;
        }

        .skinShow {
            position: absolute;
            left: 320px;
            top: 40px;
        }

        .login {
            display: block;
        }

        .game {
            display: none;
        }

        .heroContainer {
            display: block;
        }

        .skinContainer {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 登录页面 -->
    <div class="login">
        <input class="username" /> <button class="sub">登录</button>
        <img src="./sources/login.JPG" alt="">
    </div>
    <!-- 游戏选择页面 -->
    <div class="game">
        <button class="heroBtn">英雄</button>
        <div class="heroContainer">
            <div class="heroView">
                <div class="heroItem">
                    <img src="./sources/heroes/yase1.png" />
                    <span>亚瑟</span>
                </div>
                <div class="heroItem">
                    <img src="./sources/heroes/yase1.png" />
                    <span>亚瑟</span>
                </div>
            </div>
        </div>

        <button class="skinBtn">皮肤</button>
        <div class="skinContainer">
            <div class="skinView">
                <!-- <div class="skinItem">
                    <img src="./sources/heroes/yase1.png" />
                    <span>经典</span>
                </div>
                <div class="skinItem">
                    <img src="./sources/heroes/yase2.png" />
                    <span>死亡骑士</span>
                </div> -->
            </div>
        </div>

        <div class="skinShow">
            <img src="./sources/skins/301660.png" alt="">
        </div>
        <div class="userView">
            <div class="heroShow">
                <!-- <img src="./sources/heroes/yase1.png" /> -->
            </div>
            <span class="chioseusername">张三</span>
        </div>

        <div class="skillsView">
            <img src="./sources/skills/11210.png" />
            <img src="./sources/skills/11220.png" />
            <img src="./sources/skills/11230.png" />
        </div>
        <div>

        </div>
        <img src="./sources/chiose.JPG" />
    </div>
    <!-- <script src="./js/game.js"></script> -->
    <script type="module">
        import Game from './js/game.js';
        /* 
        英雄  技能  皮肤 
        玩家  游戏管理 （组织逻辑的）

        // 只有数据
        Game{
            login(){
                player:{
                heroes:[
                    {
                        亚瑟
                        skills:【技能一、技能二、技能三】
                        skins:【皮肤一、皮肤二、皮肤三..】
                        ico:''
                    }
                    {
                        鲁班
                        skills:
                        skins
                    }
                ]
            }
            }
        }


        ----组织视图逻辑
        --- 把数据和视图分开
        */


        // 和视图有关的内容，和dom有关的内容
        let game = new Game();

        // 记录选择的英雄 
        let index = 0;


        // 游戏要登录；点击登录的时候触发 有的的登录；
        let subEle = document.querySelector(".sub");
        let usernameEle = document.querySelector(".username");
        let loginEle = document.querySelector(".login");
        let gameEle = document.querySelector(".game");
        let chioseusernameEle = document.querySelector(".chioseusername")

        let heroViewEle = document.querySelector(".heroView");


        let heroShowEle = document.querySelector(".heroShow");

        subEle.onclick = function () {
            let username = usernameEle.value;
            // console.log(username);
            // 1.触发游戏对象  game对象的login 
            // 2.视图相关的内容 ，隐藏登录界面，显示游戏选择界面；
            game.login(username);
            loginEle.style.display = "none"; // 登录页面隐藏；
            // 游戏选择页面显示；
            gameEle.style.display = "block";
            chioseusernameEle.innerHTML = username;
            console.log(game);  // 有游戏相关的各种数据，把数据呈现；
            // 调用渲染英雄
            renderHeroes(game.player.heroes);
        }

        // 渲染英雄 
        function renderHeroes(heroes) {
            heroViewEle.innerHTML = "";
            // 清空静态数据
            heroes.forEach((hero, key) => {
                let heroDiv = document.createElement("div");
                heroDiv.classList.add("heroItem");
                heroDiv.innerHTML = `<img src="${hero.ico}" />
                    <span>${hero.name}</span>`;
                heroViewEle.appendChild(heroDiv);
                heroDiv.onclick = function () {
                    // console.log(key);
                    index = key;
                    // 切换选择英雄的图像；
                    heroShowEle.innerHTML = `<img src="${hero.ico}"/>`;
                    // 渲染技能；
                    renderSkills(hero.skills);
                }
            })
        }


        // 渲染技能；
        let skillsViewEle = document.querySelector(".skillsView");
        function renderSkills(skills) {
            console.log(skills);
            // 清空技能容器；
            skillsViewEle.innerHTML = "";
            skills.forEach(skill => {
                let img = document.createElement("img");
                img.src = skill.ico;
                skillsViewEle.appendChild(img);
            })


        }


        // 皮肤按钮
        let skinBtnEle = document.querySelector(".skinBtn");
        let skinContainerEle = document.querySelector(".skinContainer");
        let heroContainerEle = document.querySelector(".heroContainer");
        // 点击皮肤按钮 切换到皮肤选择页面
        skinBtnEle.onclick = function () {
            skinContainerEle.style.display = "block";
            heroContainerEle.style.display = "none";
            // console.log(game);
            // console.log(game.player.heroes[index].skins);
            renderHeroIco(game.player.heroes[index].skins);
        }
        // 点击英雄按钮 切换到英雄选择页面

        let heroBtnEle = document.querySelector(".heroBtn");
        heroBtnEle.onclick = function () {
            skinContainerEle.style.display = "none";
            heroContainerEle.style.display = "block";
        }


        let skinViewEle = document.querySelector(".skinView");
        // 把英雄皮肤的小图渲染出来
        function renderHeroIco(skins) {
            // console.log(skins);
            skinViewEle.innerHTML = "";
            skins.forEach(skin => {
                let skinDiv = document.createElement("div");
                skinDiv.classList.add("skinItem");
                skinDiv.innerHTML = `<img src="${skin.ico}" />
                    <span>${skin.name}</span>`;
                skinViewEle.appendChild(skinDiv);
                skinDiv.onclick = function(){
                     document.querySelector(".skinShow").querySelector("img").src = skin.img;   
                }
            })
        }
        














    </script>
</body>

</html>